<!--
 * @Description: 广告位缓冲demo
 * @author: 
 * @since:2024-07-24
 * @page: advertisement.vue
-->
<template>
  <ul>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
    <li>天王盖地虎，小鸡炖蘑菇</li>
  </ul>
  <img ref="imgRef" src="../assets/images/click.png" alt="" />
</template>

<script setup>
import { ref } from 'vue'
let imgRef = ref('')
let time = null

function bannerMove(dom, target) {
  clearInterval(time)
  time = setInterval(function () {
    let speed = (target - dom?.offsetTop) / 10 //目标位置减去当前位置，控制速度
    speed = Math.ceil(speed)
    if (dom.offsetTop == target) {
      clearInterval(time)
    } else {
      dom.style.top = dom?.offsetTop + speed + 'px'
    }
  }, 50)
}
window.onscroll = function () {
  let top = document.documentElement.scrollTop || document.body.scrollTop
  bannerMove(imgRef.value, top + 100) //保证广告距离顶部100px
}
</script>

<style scoped>
ul {
  margin-left: 200px;
}

li {
  list-style: none;
  line-height: 32px;
}

img {
  position: absolute;
  top: 100px; /* 广告距离顶部100px */
}
</style>
